<template>
	<view class="page_content">
		<image class="top-bg" src="/static/3001.png" />
		<card-view :data="cardData" title='' :column='cardData.length' v-if="cardData.length>0" />
		<card-view :data="cardData1" title='分类统计' :column='cardData1.length' v-if="cardData1.length>0" />
		<view class="list">
			<view class="title">
				<view>今日配送</view>
				<view @click="goAll()">
					<view>全部</view>
					<view>
						<image src="/static/icon_arrow_right.png" />
					</view>
				</view>
			</view>
			<view class="list-box" v-if="dataList.length>0">
				<devide-item :data="item" date='' v-for="(item,index) in dataList" :key="index"
					@onRefresh="getList()" />
			</view>
			<view class="empty" v-else>
				<image src="/static/nodata.png" mode=""></image>
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import cardView from './cardView.vue'
	import devideItem from './deviceItem.vue'
	const emit = defineEmits(['select'])
	// 顶部卡片信息
	const cardData = ref([])
	// 消费预警
	const cardData1 = ref([])
	// 工单管理
	const dataList = ref([])

	const goAll = () => {
		uni.navigateTo({
			url: '/pages_other/sendManage/status?'
		})
	}
	// cardData
	const getData = () => {
		uni.showLoading({
			title: '正在加载',
		})
		''
		getApp().globalData.serviceApi('', 'getServedStatis', "POST").then(res => {
			uni.hideLoading()
			const url = '/pages_other/sendManage/status?'
			cardData.value = [{
				label: '未配送',
				num: res.data.unServed ? res.data.unServed : 0,
				url: url + 'type=0'
			}, {
				label: '已配送',
				num: res.data.served ? res.data.served : 0,
				url: url + 'type=1'
			}]
		}).catch(error => {
			uni.showToast({
				icon: 'none',
				title: error.message
			})
		})
	}
	// 水控服务-顶部汇总数据
	const getData1 = () => {
		uni.showLoading({
			title: '正在加载',
		})
		getApp().globalData.serviceApi('', 'getProductStatis', "POST").then(res => {
			uni.hideLoading()
			const url = '/pages_other/sendManage/status?'
			// 水控
			res.data.forEach(item => {
				item.label = item.typeName
				item.num = item.count
				item.url = url + 'type='
			})
			cardData1.value = res.data
		}).catch(error => {
			uni.showToast({
				icon: 'none',
				title: error.message
			})
		})
	}
	// 水控服务-顶部汇总数据
	const getList = () => {
		uni.showLoading({
			title: '正在加载',
		})
		getApp().globalData.serviceApi({
			"page": "1",
			"pageSize": "10",
			"status": "1",
			"name": "",
			"addressCode": ""
		}, 'getServedPage', "POST").then(res => {
			uni.hideLoading()
			const url = '/pages_other/sendManage/status?'
			if (res.data.list && res.data.list.length > 0) {
				dataList.value = res.data.list
				return
			}
			dataList.value = []
		}).catch(error => {
			uni.showToast({
				icon: 'none',
				title: error.message
			})
		})
	}
	onShow(() => {
		getData()
		getData1()
		getList()
	})
</script>

<style lang="scss" scoped>
	.page_content {
		position: relative;
		padding-top: 100rpx;

		.top-bg {
			position: absolute;
			top: -280rpx;
			left: 0;
			width: 100%;
			z-index: -1;
		}

		.data-box {
			width: calc(100% - 64rpx);
			background-color: #ffffff;
			padding-bottom: 8rpx;
			margin: 0 auto 60rpx;
			border-radius: 20rpx;
			box-shadow: 0 8rpx 24rpx 0rpx rgba(0, 0, 0, 0.08);

			.data-title-box {
				font-size: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 550;
				color: #323233;
				padding: 30rpx 32rpx 6rpx;

				.tip {
					font-size: 24rpx;
					color: #999999;
					font-weight: 400;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-left: 6rpx;
					}
				}
			}

			.chart-box {
				height: 280rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
			}

			.data-info {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.info-item {
					width: 50%;
					padding-left: 32rpx;
					margin-bottom: 40rpx;
					box-sizing: border-box;

					.title {
						height: 24rpx;
						line-height: 24rpx;
						font-size: 24rpx;
						color: #666666;
						justify-content: flex-start;

						.rate {
							margin-left: 24rpx;
							padding-left: 32rpx;
							background-repeat: no-repeat;
							background-size: 28rpx 28rpx;

							&.up {
								color: #FE3B30;
								background-image: url('../../../static/trend_up.png');
							}

							&.down {
								color: #30A431;
								background-image: url('../../../static/trend_down.png');
							}
						}
					}

					.num-box {
						height: 40rpx;
						line-height: 24rpx;
						font-size: 24rpx;
						color: #000000;
						justify-content: flex-start;
						align-items: flex-end;
						margin-top: 16rpx;

						.num {
							line-height: 40rpx;
							font-weight: 600;
							font-size: 40rpx;
							padding-right: 8rpx;
						}

						.unit {}
					}

					&:nth-child(2n) {
						position: relative;

						&:after {
							position: absolute;
							top: 50%;
							left: 0;
							width: 1px;
							height: 48rpx;
							content: '';
							background: #EDEFF0;
							transform: translateY(-50%);
						}
					}
				}
			}
		}

		.list {
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 48rpx;
				margin-top: 60rpx;
				margin-bottom: 30rpx;

				&>view {
					&:first-child {
						color: #000000;
						font-size: 32rpx;
						font-weight: bold;
					}

					&:last-child {
						color: #929394;
						font-size: 24rpx;
						display: flex;
						align-items: center;

						image {
							width: 28rpx;
							height: 28rpx;
							margin-top: 3rpx;
							margin-left: 6rpx;
						}
					}
				}
			}

			.list-box {}
		}

		.empty {
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #666666;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-top: 100rpx;
			// margin-top: 100rpx;

			image {
				width: 256rpx;
				height: 196rpx;
				margin-bottom: 40rpx;
			}
		}
	}
</style>